<template>
    <div class="source-form wave-setting file-info">
        <pui-dialog :maskClick="false" :title="`设置${componentRef.typeList[componentRef.sourceType]}`" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="form" v-if="componentRef.sourceType === 'Waveguide'">
                    <div class="form-item">
                        <div class="label">名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导宽度x/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.xLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度y/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.yLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导长度z/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导长度" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">中心位置/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导区域折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                </div>
                <div class="form" v-if="componentRef.sourceType === 'Fiber'">
                    <div class="form-item">
                        <div class="label">波导名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">位置坐标</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="长度" class="pui-input" v-model="componentRef.compo.length">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">光纤轴向</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.axisList" v-model="componentRef.selectorValue.axis" @onChange="onSelectorChange($event, 'axis')"></pui-selector>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">半径(从内到外)</div>
                        <div class="form-content">
                            <input type="text" placeholder="半径(内)" class="pui-input" v-model="componentRef.compo.radius">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">层折射率（从内到外）</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                </div>
                <div class="form" v-if="componentRef.sourceType === 'Arc'">
                    <div class="form-item">
                        <div class="label">波导名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">外环半径</div>
                        <div class="form-content">
                            <input type="text" placeholder="外环半径" class="pui-input" v-model="componentRef.compo.outerRadius">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">位置坐标</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.width">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">材料/折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">方向</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.arcDirectionList" v-model="componentRef.selectorValue.direction" @onChange="onSelectorChange($event, 'direction')"></pui-selector>
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'Sbend'">
                    <div class="form-item">
                        <div class="label">名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">横向错位±x/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="横向错位" class="pui-input" v-model="componentRef.compo.xLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度y/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.yLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">纵向距离z/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="纵向距离" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导宽度w/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.width">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">中心位置坐标</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导区域折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'Ysplitter'">
                    <div class="form-item">
                        <div class="label">名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">Taper中心位置</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度y/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.yLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">方向</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.directionList" v-model="componentRef.selectorValue.direction" @onChange="onSelectorChange($event, 'direction')"></pui-selector>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">直波导宽度x/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.width">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">直波导长度z/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.zlength_waveguide">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">Taper宽度x/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="Taper宽度" class="pui-input" v-model="componentRef.compo.xlength_taper">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">Taper长度z/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="Taper长度" class="pui-input" v-model="componentRef.compo.zLengthTaper">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">Sbend横向错位x/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="Sbend横向错位" class="pui-input" v-model="componentRef.compo.xlength_sbend">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">Sbend纵向距离z/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="Sbend纵向距离" class="pui-input" v-model="componentRef.compo.zlength_sbend">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">Sbend波导宽度/μm</div>
                        <div class="form-content">
                            <input type="text" placeholder="Sbend波导宽度" class="pui-input" v-model="componentRef.compo.widthSbend">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导区域折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'DirectionalCoupler'">
                    <div class="form-item">
                        <div class="label">波导名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">区域x方向长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="区域x方向长度" class="pui-input" v-model="componentRef.compo.xLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">区域y方向长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="区域y方向长度" class="pui-input" v-model="componentRef.compo.yLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.width">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">位置坐标</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">材料/折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">耦合长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="耦合长度" class="pui-input" v-model="componentRef.compo.xLengthWaveguide">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">直波导间距</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导间距" class="pui-input" v-model="componentRef.compo.gap">
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'Ring'">
                    <div class="form-item">
                        <div class="label">波导名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">外环半径</div>
                        <div class="form-content">
                            <input type="text" placeholder="外环半径" class="pui-input" v-model="componentRef.compo.outerRadius">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.width">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">耦合长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="耦合长度" class="pui-input" v-model="componentRef.compo.length">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">耦合间距</div>
                        <div class="form-content">
                            <input type="text" placeholder="耦合间距" class="pui-input" v-model="componentRef.compo.gap">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">中心坐标</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">材料/折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'Mmi'">
                    <div class="form-item">
                        <div class="label">波导名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">多模波导区域x方向宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="多模波导区域x方向宽度" class="pui-input" v-model="componentRef.compo.xLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">多模波导区域y方向宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="多模波导区域x方向宽度" class="pui-input" v-model="componentRef.compo.yLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">多模波导有效宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="多模波导有效宽度" class="pui-input" v-model="componentRef.compo.We">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">位置坐标</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">输入波导数</div>
                        <div class="form-content">
                            <input type="text" placeholder="输入波导数" class="pui-input" v-model="componentRef.compo.n">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">输出波导数</div>
                        <div class="form-content">
                            <input type="text" placeholder="输出波导数" class="pui-input" v-model="componentRef.compo.m">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">端口宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.widthPort">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">单模波导宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="单模波导长度" class="pui-input" v-model="componentRef.compo.widthWg">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">输入波导长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="输入波导长度" class="pui-input" v-model="componentRef.compo.ln">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">输出波导长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="输出波导长度" class="pui-input" v-model="componentRef.compo.lm">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">端口长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.lPort">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">材料/折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                </div>
                <div class="form" v-else-if="componentRef.sourceType === 'Mzi'">
                    <div class="form-item">
                        <div class="label">波导名称</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导名称" class="pui-input" v-model="componentRef.compo.name">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">耦合区上下波导间距</div>
                        <div class="form-content">
                            <input type="text" placeholder="耦合区上下波导间距" class="pui-input" v-model="componentRef.compo.gap">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">方向耦合器耦合区上下波导间距</div>
                        <div class="form-content">
                            <input type="text" placeholder="方向耦合器耦合区上下波导间距" class="pui-input" v-model="componentRef.compo.gapDc">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">方向耦合器区域x方向长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="方向耦合器区域x方向长度" class="pui-input" v-model="componentRef.compo.xLengthDc">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导厚度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导厚度" class="pui-input" v-model="componentRef.compo.zLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">耦合长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="耦合长度" class="pui-input" v-model="componentRef.compo.coupleLength">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">方向耦合器的耦合长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="方向耦合器的耦合长度" class="pui-input" v-model="componentRef.compo.coupleLengthDc">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">上臂额外长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="上臂额外长度" class="pui-input" v-model="componentRef.compo.addLengthArm1">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">下臂额外长度</div>
                        <div class="form-content">
                            <input type="text" placeholder="下臂额外长度" class="pui-input" v-model="componentRef.compo.addLengthArm2">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">中心坐标</div>
                        <div class="form-content">
                            <input type="text" placeholder="x坐标" class="pui-input" v-model="componentRef.compo.x">
                            <input type="text" placeholder="y坐标" class="pui-input" v-model="componentRef.compo.y">
                            <input type="text" placeholder="z坐标" class="pui-input" v-model="componentRef.compo.z">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">波导宽度</div>
                        <div class="form-content">
                            <input type="text" placeholder="波导宽度" class="pui-input" v-model="componentRef.compo.width">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label">材料/折射率</div>
                        <div class="form-content">
                            <pui-selector :dataList="componentRef.materialList" v-model="componentRef.selectorValue.material" @onChange="onSelectorChange($event, 'material')"></pui-selector>
                            <input type="text" placeholder="折射率" class="pui-input" v-model="componentRef.compo.refractiveIndex" v-show="componentRef.selectorValue.material===''">
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button type="primary" @click="submit">确认</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'MonitorSetting'
})
</script>
<script lang="ts" setup>
import { PhotWaveguide } from '@/common/types/phot_types';
import { reactive, ref, getCurrentInstance } from 'vue'
import { deepClone, umToM, mToUm } from '@/utils'
import { deviceManager } from '@/services/phot_client/device';
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    animate: {
        type: String,
        default: 'fade'
    },
})
const emit = defineEmits({
    onClose: (val: any) => {},
})
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const componentRef = reactive({
    dialogVisible: false,
    typeList: {
        Waveguide: '矩形直波导',
        Sbend: 'S波导',
        Ysplitter: 'Y型波导',
        DirectionalCoupler: '方向耦合器',
        Ring: '环形谐振腔',
        Mmi: '多模干涉耦合器',
        Mzi: '马赫曾德干涉仪',
        Fiber: '光纤',
        Arc: '四分之一圆弧'
    },
    sourceType: '',
    compo: {},
    optionsList: [
        {
            label: '请选择',
            value: ''
        },
        {
            label: '是',
            value: '1',
        },
        {
            label: '否',
            value: '0',
        },
    ],
    axisList: [
        {
            label: '请选择',
            value: ''
        },
        {
            label: 'x',
            value: 'x',
        },
        {
            label: 'y',
            value: 'y',
        },
    ],
    materialList: [
        {
            label: '请选择',
            value: ''
        }
    ],
    material: '',
    selectorValue: {
        material: '',
        direction: '',
        axis: ''
    },
    fiberMaterialList: [],
    shapeList: [
        {
            label: '请选择',
            value: ''
        },
        {
            label: '左上右下',
            value: 1,
        },
        {
            label: '左下右上',
            value: -1,
        }
    ],
    arcDirectionList: [
        {
            label: '请选择',
            value: ''
        },
        {
            label: '左上弧',
            value: 1,
        },
        {
            label: '右上弧',
            value: 2,
        },
        {
            label: '右下弧',
            value: 3,
        },
        {
            label: '左下弧',
            value: 4,
        },
    ],
    directionList: [
        {
            label: '正向分束',
            value: '1'
        },
        {
            label: '反向合束',
            value: '-1'
        },
    ]
}) as any
const submit = async () => {
    proxy.$loading.open()
    if (componentRef.selectorValue.material !== '') {
        componentRef.compo.refractiveIndex = componentRef.selectorValue.material
    }
    if (componentRef.selectorValue.axis !== '') {
        componentRef.compo.axis = componentRef.selectorValue.axis
    }
    if (componentRef.selectorValue.direction !== '') {
        componentRef.compo.direction = componentRef.selectorValue.direction
    }
    try {
        componentRef.compo.x = umToM(componentRef.compo.x)
        componentRef.compo.y = umToM(componentRef.compo.y)
        componentRef.compo.z = umToM(componentRef.compo.z)
        if (componentRef.compo.className === 'Waveguide') {
            componentRef.compo.xLength = umToM(componentRef.compo.xLength)
            componentRef.compo.yLength = umToM(componentRef.compo.yLength)
            componentRef.compo.zLength = umToM(componentRef.compo.zLength)
        }
        if (componentRef.compo.className === 'Sbend') {
            componentRef.compo.xLength = umToM(componentRef.compo.xLength)
            componentRef.compo.yLength = umToM(componentRef.compo.yLength)
            componentRef.compo.zLength = umToM(componentRef.compo.zLength)
            componentRef.compo.width = umToM(componentRef.compo.width)
        }
        if (componentRef.compo.className === 'Ysplitter') {
            componentRef.compo.yLength = umToM(componentRef.compo.yLength)
            componentRef.compo.zlength_waveguide = umToM(componentRef.compo.zlength_waveguide)
            componentRef.compo.xlength_taper = umToM(componentRef.compo.xlength_taper)
            componentRef.compo.zLengthTaper = umToM(componentRef.compo.zLengthTaper)
            componentRef.compo.xlength_sbend = umToM(componentRef.compo.xlength_sbend)
            componentRef.compo.zlength_sbend = umToM(componentRef.compo.zlength_sbend)
            componentRef.compo.widthSbend = umToM(componentRef.compo.widthSbend)
            componentRef.compo.width = umToM(componentRef.compo.width)
        }
        const clone = deepClone(componentRef.compo)
        delete clone.parameters
        componentRef.compo.parameters = JSON.stringify(clone)
        await deviceManager.updateWaveguide(componentRef.compo)
        proxy.$loading.close()
        proxy.$toast({
            type: 'success',
            value: '修改成功'
        })
    } catch (err: any) {
        proxy.$loading.close()
        proxy.$toast({
            type: 'error',
            value: '修改失败'
        })
    }
    closeDialog()
}
const init = async (e: any) => {
    console.group('WaveguideSetting')
    console.log(e)
    componentRef.dialogVisible = true
    componentRef.materialList = [
        {
            label: '请选择',
            value: ''
        }
    ]
    componentRef.sourceType = e.sourceType
    let compo = await deviceManager.getWaveguide(e.compo.id)
    compo.x = mToUm(compo.x)
    compo.y = mToUm(compo.y)
    compo.z = mToUm(compo.z)
    compo.yLength = mToUm(compo.yLength)
    if (compo.className === 'Waveguide') {
        compo.xLength = mToUm(compo.xLength)
        compo.zLength = mToUm(compo.zLength)
    }
    if (compo.className === 'Sbend') {
        compo.xLength = mToUm(compo.xLength)
        compo.zLength = mToUm(compo.zLength)
        compo.width = mToUm(compo.width)
    }
    if (compo.className === 'Ysplitter') {
        compo.zlength_waveguide = mToUm(compo.zlength_waveguide)
        compo.xlength_taper = mToUm(compo.xlength_taper)
        compo.zLengthTaper = mToUm(compo.zLengthTaper)
        compo.xlength_sbend = mToUm(compo.xlength_sbend)
        compo.zlength_sbend = mToUm(compo.zlength_sbend)
        compo.widthSbend = mToUm(compo.widthSbend)
        compo.width = mToUm(compo.width)
    }
    console.log('compo:',compo)
    compo.className = e.sourceType
    let newCompo = new PhotWaveguide()
    console.log('newCompo:',newCompo)
    componentRef.compo = Object.assign(newCompo, compo)
    // componentRef.selectorValue.direction = componentRef.compo.direction
    // componentRef.selectorValue.material = componentRef.compo.material
    // componentRef.selectorValue.axis = componentRef.compo.axis
    const materialList = await deviceManager.getMaterials()
    materialList.map((material: any) => {
        componentRef.materialList.push({
            material,
            label: material.name,
            value: material.name,
        })
    })
    // componentRef.compo.name = e.compo.name
    // componentRef.compo.waveguideId = e.compo.id
    console.log(componentRef.compo)
    console.groupEnd()
}
const onSelectorChange = (e: any, type: any) => {
    if (type === 'material') {
        componentRef.compo.material = e.material
    }
}
defineExpose({
    init
})
</script>